﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HinhKhacCuaSanPham.ascx.cs"
    Inherits="FrontEnd_Body_Center_HinhKhacCuaSanPham" %>
  
<script type="text/javascript" language="javascript">

var totalPageKH='<%=this._pagemaxKH %>';

var pageindexKH=0;
var totalImageKH='<%=this._xpProImg.Count %>';
var timeDelayKH;
var indexKH = 0;
var arrayImagesKH='<%=_ProductImg %>'.split(';');

function DeleteDataKH()
{
    var count;
    for (count=0;count<4;count++)
    {
   
        var a1 = document.getElementById('aKH'+count); 
        if(a1!=null)
        {
        
          var achild=a1.childNodes;
         var length=achild.length;
         
         for(var i=0; i<length; i++)
         {
           a1.removeChild(achild[0]);
    }     
        }
       
    }
}
function previous_imageHK()
{  
 
    pageindexKH=indexKH;
    
    if(pageindexKH>0)
    {
        pageindexKH--;
    }
    if(pageindexKH<=0)
    {
        pageindexKH=totalPageKH;       
    }  
    DeleteDataKH();    
    var count=0;
    for(var k1=(pageindexKH-1)*4;k1<totalImageKH;k1++)
    {            
        if(count<4)
        {    
           var img=document.createElement('img');                                             
           img.setAttribute('src',arrayImagesKH[k1].split(',')[0]);
           img.setAttribute('id','imgKH'+count);
           img.setAttribute('class','bg_hinhanhthem');
           img.setAttribute('border',0);
           var a = document.getElementById('aKH'+count);
             a.appendChild(img);
           a.setAttribute('href',arrayImagesKH[k1].split(',')[0]);
         
          
           count++;
        }
    }
    indexKH = pageindexKH;    
}
//function to get the next image in the array

function next_imageHK()
{ 
    pageindexKH=indexKH;
    if (pageindexKH==totalPageKH) 
       {pageindexKH=0}  
    if (pageindexKH<totalPageKH)
     {
       pageindexKH++;                       
         DeleteDataKH();
            
       var count=0;
        var k1;
        for(var k1=(pageindexKH-1)*4;k1< totalImageKH;k1++)
        {            
            if(count<4)
            {                
                var img=document.createElement('img');                                             
                img.setAttribute('src',arrayImagesKH[k1].split(',')[0]);
                img.setAttribute('id','imgKH'+count); img.setAttribute('class','bg_hinhanhthem');
                img.setAttribute('border',0);
                var a = document.getElementById('aKH'+count);
                a.appendChild(img);
                 a.setAttribute('href',arrayImagesKH[k1].split(',')[1]);
         count++;
            }
        }
        indexKH = pageindexKH;                           
     }   
}

function slideshow_automaticHK()
{ 

    pageindexKH=indexKH;
    if (pageindexKH==totalPageKH) 
       {pageindexKH=0}  
    if (pageindexKH<totalPageKH)
     {
        pageindexKH++;  
        previous_imageHK();
        timeDelay=setTimeout("slideshow_automaticHK()",10000);                    
     }  
}

</script>

<div >
<div style="vertical-align: bottom; text-align: center; float: left; padding-top: 7px">
            <a href="javascript:previous_imageHK();">
                 <img src="images/btn_left1.png" border="none"/></a>
        </div>
   <div  id="vlightbox" style="float: left"> 
   <%=this._Start %>
        </div>
                    <div style="vertical-align: middle; text-align: center; float: left; padding-top: 7px">
            <a href="javascript:next_imageHK();">
               <img src="images/btn_right1.png" border="none" /></a>
        </div> 
</div>

